<template>
  <el-table :data="tableData" border :height="600">
    <el-table-column
      fixed
      width="120"
      label="下单日期"
      align="center"
      prop="dataDate"
    ></el-table-column>
    <el-table-column fixed label="品牌" align="center" prop="brand" />
    <el-table-column fixed label="供应商" align="center" prop="supplier" />
    <el-table-column
      fixed
      width="120"
      label="合同号"
      align="center"
      prop="contractNumber"
    />
    <el-table-column
      fixed
      label="采购单号"
      align="center"
      prop="purchaseOrderNumber"
    />
    <!-- <el-table-column
        width="120"
        fixed
        label="产品款号"
        align="center"
        prop="spu"
      />
      <el-table-column fixed label="颜色" align="center" prop="colorProperty" /> -->
    <el-table-column width="140" fixed label="sku" align="center" prop="sku" />
    <!-- <el-table-column align="center" prop="firstLevelColumn" label="一级类目">
      </el-table-column>
      <el-table-column align="center" prop="secondLevelColumn" label="二级类目">
      </el-table-column>
      <el-table-column align="center" prop="threeLevelColumn" label="三级类目">
      </el-table-column>
      <el-table-column label="新品/老品" align="center" prop="isNewProduct" /> -->
    <el-table-column
      align="center"
      prop="contractType"
      label="类型"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="isNewProduct"
      label="是否新品"
    ></el-table-column>
    <el-table-column
      label="协议到货日期"
      align="center"
      prop="contractDeliveryDate"
      width="120"
    >
      <template slot-scope="scope">
        <span>{{
          parseTime(scope.row.contractDeliveryDate, "{y}-{m}-{d}")
        }}</span>
      </template>
    </el-table-column>

    <el-table-column label="下单数量" align="center" prop="orderQuantity" />
    <el-table-column
      label="外部订单号"
      align="center"
      prop="externalOrderNumber"
    />
    <el-table-column label="损耗件数" align="center" prop="lossQuantity" />

    <el-table-column
      label="合同采购价(元)"
      align="center"
      prop="contractPurchasePrice"
    />
    <el-table-column
      label="合同采购金额(元)"
      align="center"
      prop="contractAmount"
    />
    <el-table-column label="是否含税" align="center" prop="isTaxIncluded" />

    <el-table-column
      label="单件附加费用(元)"
      align="center"
      prop="additionalCostPerUnit"
    />
    <el-table-column
      label="订单附加费用(元)"
      align="center"
      prop="orderAdditionalCost"
    />
    <el-table-column
      label="附加费用说明"
      align="center"
      prop="additionalCostDescription"
    >
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="bottom" width="300">
          <!-- <span>{{ scope.row.fabricComposition }}</span> -->
          <el-input
            v-model="scope.row.additionalCostDescription"
            :min-height="192"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 24 }"
            :style="{ width: '100%' }"
            :disabled="true"
          />
          <div slot="reference">
            <span class="textname">
              {{ scope.row.additionalCostDescription }}
            </span>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      width="150"
      label="成本裸价(元)（含税）"
      align="center"
      prop="costPriceIncludingTax"
    />
    <el-table-column
      width="150"
      label="成本裸价(元)(不含税)"
      align="center"
      prop="costPriceExcludingTax"
    />
    <el-table-column
      label="已入库数量"
      align="center"
      prop="quantityReceived"
    />
    <el-table-column
      width="150"
      label="是否准交"
      align="center"
      prop="isOverdue30Days"
    />
    <el-table-column
      label="协议日期内已交货数量"
      align="center"
      prop="overdueQuantity30Days"
    />
    <el-table-column
      label="逾期未交付"
      align="center"
      prop="currentDelayQuantity"
    />

    <el-table-column
      label="逾期己交货数"
      align="center"
      prop="overdueDeliveryQuantity"
    />
    <el-table-column label="交付完成率 " align="center" prop="overdueRateStr">
    </el-table-column>
    <el-table-column label="收货状态" align="center" prop="receiptStatus" />
    <el-table-column label="订单状态" align="center" prop="orderStatus" />

    <el-table-column
      label="采购完结未交付数"
      align="center"
      prop="purUnDeliveryQuantity"
    />
    <el-table-column
      label="未完结待入库数量"
      align="center"
      prop="unFinishUnReceivedQuantity"
    />
    <el-table-column
      label="超入库数量"
      align="center"
      prop="overOrderReceivedQuantity"
    />
    <el-table-column label="是否有交货差异" align="center" prop="isOverOrder" />
    <el-table-column label="差异数量" align="center" prop="overOrderQuantity" />
  </el-table>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>